<!DOCTYPE html> 
<html manifest="manifest.cache" class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px"> 
	<head> 
	<!--View fullscreen on IOS devices if added to homescreen--> 
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	
	<title>Lyt</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="js/Detect.js" type="text/javascript"></script>
    <script src="js/jqm-gui.js" type="text/javascript"></script> 

	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
	
 
</head> 
<body> 

<!-- Start of main-menu page -->
<div data-role="page" id="scetchup">
	<div data-role="header" data-theme=""  >
		<h1>Lyt</h1>
	</div><!-- /header -->
	<div data-role="collapsible" data-collapsed="true">
		<h3>DAISY HTML5 player read me</h3>
		<p>This is the demo version of a HTML5 / jquery player for DAISY audiobooks. It takes advantage of the excellent <a href='http://www.jquery.com'>Jquery</a> and <a href='http://www.jquerymobile.com'>Jquerymobile</a> frameworks. That means that the code is written with special regards to being accessible and cross-platform (Android, iPhone, Symbian, Safari, iExplorer and more). Right now the code is displaying a static DAISY 2.02 testbook in danish, but it will soon implement the DAISY Online Delivery Protocol (<a href='http://www.daisy.org/project/daisy-online-delivery'>DODP</a>)<p>
		<p>Currently it's possible to use the following options.
			<ul>
				<li>Navigation - start here. At this page you see the text from a DAISY 2.02 NCC converted to a Jquerymobile 	list. Clicking a link, will cause the player to start and the text-window to be displayed.</li>
			<li>Find - search interface that searches in the Nota library catalog. Links are not dynamic at this point, any book will start playing the testbook. To test it, try searching for "h.c. andersen"</li>
				<li>Login - login form to access Nota, not implemented</li>
				<li>Booksshelf - overview of present books, not implemented</li>
				<li>Settings for player, text display etc - not implemented</li>
			</ul>
		</p>
	</div>

	<div data-role="content">	
		<ul data-role="listview" data-theme="">
			<li><a href="#nav">Navigation</a></li>
			<li><a href="#search">Find</a></li>
			<li><a href="#settings">Settings</a></li>
			<li><a href="#login">Login</a></li>
			<li><a href="#bookshelf">Bookshelf</a></li>	
		</ul>
	</div><!-- /content -->
</div><!-- /page -->


<!-- Start of login page -->
<div data-role="page" id="login">
	<div data-role="header" data-theme="" >
		<h1>Login</h1>
	</div><!-- /header -->

	<div data-role="content">	
	<form action="#login-sucessful" method="get">
		<div data-role="fieldcontain">
		    <label for="name">Brugernavn:</label>
		    <input type="text" name="name" id="name" value=""  />
		    <label for="name">Kodeord:</label>
		    <input type="password" name="name" id="name" value=""  />
		    <label for="name"></label>
		    <input type="submit" name="submit" id="submit" value="ok" data-inline="true" />
		</div>
			<ul data-role="listview">
				<li><a href="#forgotten-password" data-rel="dialog">Glemt kodeord</a></li>			
				<li><a href="#new-user" data-rel="dialog">Ny bruger</a></li>		
			</ul>
	</div><!-- /content -->
	</form>
</div><!-- /page -->

<!-- Start of forgotten password page -->
<div data-role="page" id="forgotten-password">
	<div data-role="header" data-theme="">
		<h1>Glemt kodeord</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<div data-role="fieldcontain">
		    <label for="name">Brugernavn:</label>
		    <input type="text" name="name" id="name" value=""  />
		</div>
		<p>Du vil modtage en E-mail med et midlertidigt kodeord</p>
		<p>Derefter kan du selv gå ind og vælge et nyt kodeord</p>
	</div><!-- /content -->
</div><!-- /page -->

<!-- Start of new-user page -->
<div data-role="page" id="new-user">

	<div data-role="header" data-theme="">
		<h1>Ny bruger</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>På denne side kan du melde dig ind hos Nota, og dermed få adgang til materialerne på E17. Her finder du også indmeldingsblanketter, som du kan downloade og udskrive.</p>
	</div><!-- /content -->
</div><!-- /page -->

<!-- Start of bookshelf page -->
<div data-role="page" id="bookshelf">
	<div data-role="header" data-theme="">
		<h1>bookshelf</h1>
	</div><!-- /header -->

	<div data-role="content" id="bookshelf-content">	
		<ul data-role="listview">
			<li data-role="list-divider">T</li>
			<li>
				<img src="images/default.jpg" />
				<a href="#book-play">Testbog</a>
			</li>
		</ul>
	</div><!-- /content -->
</div><!-- /page -->

<!-- Start of search page -->
<div data-role="page" id="search">

	<div data-role="header" data-theme="">
		<h1>Find</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<div data-role="fieldcontain">
		<form action="/lyt/search.asmx/SearchFreetext" method="get" id ="search-form">
			<label for="search-term"></label>
			<input type="search" name="term" id="search-term" value=""  />
		</form>
		</div>
        <ul id="structure" data-role="listview">
        </ul>
	</div><!-- /content -->
</div><!-- /page -->

<!-- Start of inspiration page -->
<div data-role="page" id="inspiration">

	<div data-role="header" data-theme="">
		<h1>Inspiration</h1>
		<a href="#bookshelf"  data-direction="reverse">bookshelf</a>
	</div><!-- /header -->
	
	<div data-role="content">	
		<ul data-role="listview" data-theme="">
			<li><a href="#search-result">New</a></li>
			<li><a href="#search-result">Most read</a></li>
			<li><a href="#search-result">Subjects</a></li>
		</ul>
	</div><!-- /content -->
</div><!-- /page -->

<!-- Start of book-details page -->
<div data-role="page" id="book-details">
	<div data-role="header" data-theme="">
		<h1>Book details</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<div class="ui-grid-a">
			<div class="ui-block-a"><img src="images/default.png"/></div>
			<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
		</div><!-- /grid-a -->
	</div><!-- /content -->
</div> <!-- /page -->

<!-- Start of book-play page -->
<div data-role="page"  id="book-play" >
	<div data-role="header" data-theme="">
		<h1 class="book-title">Test book</h1>
<a data-icon="arrow-l" data-rel="back" href="#">Back</a>		
	</div --><!-- /header -->
	
    <div data-role="content" id="book-text-content" >
    </div><!-- /content -->	
    <div data-role="footer" data-theme="" data-position="fixed" data-id="per-footer">
	  <div data-role="navbar" id="book-play-navbar"><ul><li><a href="javascript:Play();">Play</a></li><li><a href="javascript:Pause();">Pause</a></li></ul></div>
    </div><!-- /footer -->
</div><!-- /page -->



<!-- Start of navigation page -->
<div data-role="page" id="nav">
	<div data-role="header" data-theme="">
		<h1>Test-book index</h1>				
	</div><!-- /header -->
	
	<div data-role="content" id="nav-content">
	</div>
</div><!-- /page -->

<!-- Start of settings page -->
<div data-role="page" id="settings">
	<div data-role="header" data-theme="">
		<h1>Settings</h1>		
	</div><!-- /header -->
	
	<div data-role="content" id="set-content">
	<div data-role="fieldcontain">
			<fieldset data-role="controlgroup">
				<legend>Choose as many snacks as you'd like:</legend>
				<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
				<label for="checkbox-1a">Cheetos</label>

				<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
				<label for="checkbox-2a">Doritos</label>

				<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
				<label for="checkbox-3a">Fritos</label>

				<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
				<label for="checkbox-4a">Sun Chips</label>

		    </fieldset>
		</div>				
	</div>
</div><!-- /page -->
</body>
</html>
